<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<title>网站前端学习目录</title> 
</head> 
<body> 
<div class="class limit"> 
<h3 data-sta="2">第一阶段：HTML超文本标记语言 </h3> 
<table width="100%" border="0"> 
<tbody>
<tr class="title"> 
<td width="99" valign="center"><p align="center">课程名称 </p></td> 
<td width="93" valign="center"><p align="center">教学科目 </p></td> 
<td width="246" valign="center"><p align="center">详细内容 </p></td> 
<td width="176" valign="center"><p align="center">完成目标 </p></td> 
<td width="185" valign="center"><p align="center">项目实例 </p></td> 
</tr> 
<tr> 
<td width="99" valign="center" rowspan="2"><p align="center">HTML </p></td> 
<td width="93" valign="center"><p align="center">前端课程引言 </p></td> 
<td width="246" valign="center"><p><font color="#ccc">1.前端课程前言<br /> 2.什么是网站<br /> 3.什么是网页<br /> 4.构成网页的元素<br /> 5.网站制作流程详解<br /> 6.脱产学习技巧 如何拿高薪<br /> 7.WEB前端开发课程及目标 </font></p></td> 
<td width="176" valign="center"><p align="center">了解学习课程安排和学习目标，进入紧张的学习状态。 </p></td> 
<td width="185" valign="center"><p>为自己制定学习目标和学习计划 </p></td> 
</tr> 
<tr> 
<td width="93" valign="center"><p align="center">HTML语法、标签讲解 </p></td> 
<td width="246" valign="center"><p><font color="#ccc">1.HTML是什么<br /> 2.HTML特征<br /> 3.HTML页面主体结构<br /> 4.DOCTYPE文档声明<br /> 5.HTML语法结构<br /> 6.HTML标签特性<br /> 7.对标签和单标签<br /> 8.body元素中的标签<br /> 9.头元素中的标签<br /> 10.网页编码、乱码的解决方案<br /> 11.字体标签<br /> 12.超链接（a标签）<br /> 13.锚文本链接（a标签）<br /> 14.Pre标签<br /> 15.HTML实体<br /> 16.图像img标签<br /> 17.图像地图<br /> 18.常见图片格式讲解<br /> 19.路径（绝对路径、相对路径）<br /> 20.列表标签<br /> 21.表格标签<br /> 22.单行文本表单<br /> 23.文本域标签<br /> 24.单选按钮标签<br /> 25.多选按钮标签<br /> 26.下拉列表标签<br /> 27.按钮标签<br /> 28.文件域标签<br /> 29.隐藏域标签<br /> 30.Label标签<br /> 31.html框架(帧窗口)技术<br /> 32.Iframe标签<br /> 33.页面加入视频的方法 </font></p></td> 
<td width="176" valign="center"><p align="center">对web开发所需要的HTML知识有深刻认识，了解HTML作用与使用方法，熟练掌握各种html标签的用法及table布局的思路与方法 </p></td> 
<td width="185" valign="center"><p>1. 个人简历页面<br /> 2. 用锚链接技术制作起点中文网阅读页面<br /> 3. 用分帧技术布局baigoogledu搜索页面<br /> 4. 用分帧技术布局猫扑大杂烩 </p></td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #1B4881;" data-sta="2">第二阶段：DIV+CSS网页标准化布局</h3> 
<table width="100%" height="974"> 
<tbody>
<tr class="title"> 
<td width="99">课程名称</td> 
<td width="93">教学科目</td> 
<td width="246">详细内容</td> 
<td width="176">项目实例</td> 
<td width="52">课时</td> 
</tr> 
<tr> 
<td width="99" rowspan="4" align="center" valign="middle">DIV+CSS</td> 
<td width="93" align="center" valign="middle">Div+css概念语法基础</td> 
<td width="246"><font color="#ccc"><p>1.&nbsp;div+css初识</p> <p>2.&nbsp;css的引入方式</p> <p>3.&nbsp;div+css缺点</p> <p>4.&nbsp;div+css优点</p> <p>5.&nbsp;css选择器</p> <p>6.&nbsp;css继承性和叠加性</p> <p>7.&nbsp;选择器优先级</p> <p>8.&nbsp;css注释</p> <p>9.&nbsp;块元素和行内元素</p> <p>10.&nbsp;行内块级元素</p> <p>11.&nbsp;文档流</p> <p>12.&nbsp;css文字属性</p> <p>13.&nbsp;文本段落性</p> <p>14.&nbsp;新闻页面文字区域的开发</p> </td> 
<td width="176"> <p>1.&nbsp;利用不同选择器为页面元素加样式</p> <p> 2.&nbsp;制作文章内容页面并对文字进行样式美化操作性</p> <p>3.&nbsp;腾讯、新浪、中新网新闻页面文字开发</p></font> </td> 
<td width="52" align="center" valign="middle">20</td> 
</tr> 
<tr> 
<td width="93" align="center" valign="middle">Div+CSS盒子模型</td> 
<td width="246"> <font color="#ccc"><p>1.&nbsp;盒子模型</p> <p>2.&nbsp;盒子实例讲解</p> <p>3.&nbsp;盒子模型讲解（内边距）</p> <p>4.&nbsp;盒子模型讲解（外边距）</p> <p>5.&nbsp;盒子示意图示</p> <p>6.&nbsp;盒子模型属性设置方式</p> <p>7.&nbsp;填充和边距的常见问题</p> <p>8.&nbsp;盒子模型的宽高属性</p> <p>9.&nbsp;块元素和行元素的相互转换</p> <p>10.&nbsp;元素的转换（display属性）</p> <p>11.&nbsp;overflow属性12.&nbsp;Border属性</p> </td> 
<td width="176">1.&nbsp;拉手网导航条</font></td> 
<td width="52" align="center" valign="middle">20</td> 
</tr> 
<tr> 
<td width="93" align="center" valign="middle">Div+CSS位置控制</td> 
<td width="246"> <font color="#ccc"><p>1.&nbsp;Float浮动属性</p> <p>2.&nbsp;清除浮动</p> <p>3.&nbsp;Position定位属性-相对定位</p> <p>4.&nbsp;Position定位属性-绝对定位</p> <p>5.&nbsp;Position定位属性-固定定位</p> <p>6.&nbsp;Z-index层级属性</p> </td> 
<td width="176"> <p>1.&nbsp;用色块布局糯米网顶部区域</p> <p> 2.&nbsp;布局凡客诚品首页</p> <p> 3.&nbsp;许愿墙页面</p> <p> 4.&nbsp;聚美优品产品区块开发</p> <p> 5.&nbsp;机器人效果开发</p> </font></td> 
<td width="52" align="center" valign="middle">10</td> 
</tr> 
<tr> 
<td width="93" align="center" valign="middle">Div+CSS综合应用</td> 
<td width="246"> <font color="#ccc"><p>1.&nbsp;background背景属性</p> <p>2.&nbsp;Css&nbsp;精灵技术</p> <p>3.&nbsp;cursor鼠标样式属性</p> <p>4.&nbsp;visibility属性</p> <p>5.&nbsp;取消li的默认样式</p> <p>6.&nbsp;透明度属性</p> <p>7.&nbsp;CSS命名规范</p> <p>8.&nbsp;CSS&nbsp;HACK（兼容性调试）</p> <p>9.&nbsp;网页开发技巧、网页开发秘籍</p> </td> 
<td width="176"> <p>1.&nbsp;百度糯米网首页（兼容各浏览器）</p> <p> 2、天猫、淘宝、国美、京东等大型电商网站首页（兼容各浏览器）</p> </font></td> 
<td width="52" align="center" valign="middle">10</td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #245397;" data-sta="2">第三阶段：JavaScript效果开发</h3> 
<table width="100%" border="0"> 
<tbody>
<tr class="title"> 
<td width="99" valign="center"><p align="center"><a name="OLE_LINK1" id="OLE_LINK1">课程名称</a></p></td> 
<td width="100" valign="center"><p align="center">教学科目 </p></td> 
<td width="300" valign="center"><p align="center">详细内容 </p></td> 
<td valign="center"><p align="center">项目实例 </p></td> 
</tr> 
<tr> 
<td width="99" valign="center" rowspan="16"><p align="center">javascript </p></td> 
<td width="100" valign="center"><p>JavaScript语法基础 </p></td> 
<td width="300" valign="center"><p>1. javascaript用来干什么&nbsp;<br /> 2. javascript语法特点&nbsp;<br /> 3. javascript的组成部分&nbsp;<br /> 4. javascript难点&nbsp;<br /> 5. 学习javascript准备工具&nbsp;<br /> 6. javascrpt输出工具&nbsp;<br /> 7. javascript放置引用&nbsp;<br /> 8. 放置时的注意事项&nbsp;<br /> 9. javascript注释&nbsp;<br /> 10. javascript命名规范&nbsp;<br /> 11. javascript变量&nbsp;<br /> 12. 声明变量的注意事项 </p></td> 
<td valign="center"><p>编写规范javascript代码，使用不同输出语句在页面中成功输出欢迎语句 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript变量 </p></td> 
<td width="300" valign="center"><p>1. 字符串类型（String）&nbsp;<br /> 2. 数值类型（Numbeer）&nbsp;<br /> 3. 未定义类型（Undefined）&nbsp;<br /> 4. 空类型（NULL）&nbsp;<br /> 5. 布尔型(Boolean)&nbsp;<br /> 6. 数组类型（array）&nbsp;<br /> 7. 对象类型（object） </p></td> 
<td valign="center"><p>定义变量并存放不同类型的数据，查看不同类型数据返回数据类型的差别。 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript运算符 </p></td> 
<td width="300" valign="center"><p>1. 算数运算符&nbsp;<br /> 2. 关系运算符(比较运算符)&nbsp;<br /> 3. 赋值运算符&nbsp;<br /> 4. 逻辑运算符&nbsp;<br /> 5. 一元运算符&nbsp;<br /> 6. 三元运算符 </p></td> 
<td valign="center"><p>1. 使用不同运算符对存放不同类型数据的变量进行运算操作，实现常见的数学运算&nbsp;<br /> 2. 利用三元表达式判断用户是否成年&nbsp;<br /> 3. 倒计时中的时间转换 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript流程控制 </p></td> 
<td width="300" valign="center"><p>1. If分支选择结构&nbsp;<br /> 2. Switch条件选择结构&nbsp;<br /> 3. For循环结构&nbsp;<br /> 4. While循环结构&nbsp;<br /> 5. Do…while循环结构&nbsp;<br /> 6. 循环结构中的跳出语句 </p></td> 
<td valign="center"><p>1. 利用流程控制语句制作成绩分析页面&nbsp;<br /> 2. 制作正直角三角形&nbsp;<br /> 3. 制作倒直角三角形&nbsp;<br /> 4. 制作金字塔图形&nbsp;<br /> 5. 制作九九乘法表&nbsp;<br /> 6. 制作能自定义行列的隔行变色的表格 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript函数 </p></td> 
<td width="300" valign="center"><p>1. 函数概念&nbsp;<br /> 2. 函数的声明方式(创建)&nbsp;<br /> 3. 函数的调用方式&nbsp;<br /> 4. 创建调用函数注意问题&nbsp;<br /> 5. 带有参数的函数&nbsp;<br /> 6. 函数的返回值&nbsp;<br /> 7. 变量的作用域&nbsp; </p></td> 
<td valign="center"><p>1. 编写各种运算函数&nbsp;<br /> 2. 自定义运算效果&nbsp; </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript内置顶层函数 </p></td> 
<td width="300" valign="center"><p>1. 数据类型的转换&nbsp;<br /> 2. Number()函数&nbsp;<br /> 3. parseInt()函数<br /> 4. parseFloat()函数&nbsp;<br /> 5. eval()函数&nbsp;<br /> 6. isNaN()函数 </p></td> 
<td valign="center"><p>对不同类型数据进行转换并观察转换结果 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript数组 </p></td> 
<td width="300" valign="center"><p>1. 数组概念&nbsp;<br /> 2. 声明(创建)数组&nbsp;<br /> 3. 遍历数组的方式&nbsp;<br /> 4. 访问(操作)数组&nbsp;<br /> 5. 数组的维度&nbsp;<br /> 6. 使用数组的注意事项 </p></td> 
<td valign="center"><p>1.创建一个班级同学姓名数组，并依次查看数组元素&nbsp;<br /> 2. 获得数组中的最大值<br /> 3. 获得二维数组中长度最长的字数组 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript对象 </p></td> 
<td width="300" valign="center"><p>1. 对象的概念&nbsp;<br /> 2. Json形式创建对象&nbsp;<br /> 3. 添加属性和方法&nbsp;<br /> 4. 访问对象的属性和方法&nbsp;<br /> 5. 删除对象的属性&nbsp; </p></td> 
<td valign="center"><p>1. 编写一个“手机”对象，并添加对应的属性和方法&nbsp;<br /> 2. 编写一个“人”对象，并添加对应的属性和方法 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript数组对象 </p></td> 
<td width="300" valign="center"><p>1. Length属性&nbsp;<br /> 2. 添加数组元素&nbsp;<br /> 3. 万能删除数组元素&nbsp;<br /> 4. 数组的转换&nbsp;<br /> 5. 数组的分割&nbsp;<br /> 6. 数组的连接 </p></td> 
<td valign="center"><p>1. 编写删除数组重复元素的函数&nbsp;<br /> 2. 编写对数组进行排序的函数 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript数学对象 </p></td> 
<td width="300" valign="center"><p>1. 获取绝对值&nbsp;<br /> 2. 向下取整操作&nbsp;<br /> 3. 向上取整操作&nbsp;<br /> 4. 获取随机数小数&nbsp;<br /> 5. 获取随机整数 </p></td> 
<td valign="center"><p>1. 制作随机点名页面&nbsp;<br /> 2. 制作随机抽奖页面&nbsp;<br /> 3. 制作随机点菜页面 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>BOM </p></td> 
<td width="300" valign="center"><p>1. BOM模型概念&nbsp;<br /> 2. 获得浏览器可视区域的尺寸&nbsp;<br /> 3. setInterval()定时器&nbsp;<br /> 4. setTimeout()定时器&nbsp;<br /> 5. 清除定时器&nbsp;<br /> 6. history对象&nbsp;<br /> 7. location对象 </p></td> 
<td valign="center"><p>1. 制作定时跳转页面&nbsp;<br /> 2. 页面倒计时跳转效果 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript事件 </p></td> 
<td width="300" valign="center"><p>1. 事件的概念&nbsp;<br /> 2. 事件源的概念&nbsp;<br /> 3. 事件触发条件的概念&nbsp;<br /> 4. 事件处理程序的概念&nbsp;<br /> 5. click鼠标事件&nbsp;<br /> 6. dblclick鼠标事件&nbsp;<br /> 7. mousedown鼠标事件&nbsp;<br /> 8. mouseup鼠标事件&nbsp;<br /> 9. mousemove鼠标事&nbsp;<br /> 10. mouseover鼠标事件&nbsp;<br /> 11. mouseout鼠标事件&nbsp;<br /> 12. keyup键盘事&nbsp;<br /> 13. keydown键盘事件&nbsp;<br /> 14. keypress键盘事件&nbsp;<br /> 15. submit表单事件&nbsp;<br /> 16. blur表单事件&nbsp;<br /> 17. focus表单事件&nbsp;<br /> 18. change表单事件&nbsp;<br /> 19. load页面事件&nbsp;<br /> 20. resize页面事件&nbsp;<br /> 21. 事件的多种绑定方式 </p></td> 
<td valign="center"><p>1. 凡客诚品首页图片轮换图&nbsp;<br /> 2. 新浪微博输入框效果&nbsp;<br /> 3. 制作随机颜色、随机字体点名系统&nbsp;<br /> 4. 京东网多级导航菜单&nbsp;<br /> 5. 网易tab切换效果实现&nbsp;<br /> 6. 国美商城左右轮播效果实现&nbsp;<br /> 7. 苏宁易购顶部二级菜单&nbsp;<br /> 8. 制作图片无缝滚动效果&nbsp;<br /> 9. 京东商城焦点图效果 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>DOM操作 </p></td> 
<td width="300" valign="center"><p>1. DOM模型&nbsp;<br /> 2. document对象&nbsp;<br /> 3. getElementById()方法&nbsp;<br /> 4. getElementsByTagName()方法&nbsp;&nbsp;<br /> 5.getElementsByName() 方法&nbsp;<br /> 6. getElementsByClassName()方法&nbsp;<br /> 7. 对内容、属性、样式的操作&nbsp; </p></td> 
<td valign="center"><p>1. 获取页面中的表单并改变样式&nbsp;<br /> 2. 改变页面中所有图片的样式&nbsp;<br /> 3. 改变页面中所有a连接的样式&nbsp;<br /> 4. 制作即时提交的留言板页面&nbsp;<br /> 5. 年会随机抽奖效果&nbsp;<br /> 6. 京东商城轮播图效果&nbsp; </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript事件对象 </p></td> 
<td width="300" valign="center"><p>1. 事件对象概念&nbsp;<br /> 2. 获取事件对象&nbsp;<br /> 3. 获取浏览器的位置&nbsp;<br /> 4. 获取事件源的位置&nbsp;<br /> 5. 获得鼠标移入移出效果&nbsp;<br /> 8. this对象详解 </p></td> 
<td valign="center"><p>1. 开发基于javascript的打字游戏&nbsp;<br /> 2、微博输入框即时统计字数效果&nbsp;<br /> 2. 淘宝网商品放大镜效果 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript日期对象 </p></td> 
<td width="300" valign="center"><p>1.格林尼治时间、国际协调时间&nbsp;<br /> 2.创建日期对象&nbsp;<br /> 3.获取日期对象信息&nbsp;<br /> 4.设置日期对象信息 </p></td> 
<td valign="center"><p>1. 团购倒计时效果&nbsp;<br /> 2. 天猫秒杀计时效果<br /> 3. 获得日期差效果 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p>JavaScript正则表达式 </p></td> 
<td width="300" valign="center"><p>1. 正则表达式&nbsp;<br /> 2. 创建正则表达式&nbsp;<br /> 3. test方法&nbsp;<br /> 4. exec方法&nbsp;<br /> 5. 原子&nbsp;<br /> 6. 元字符&nbsp;<br /> 7. 原子表&nbsp;<br /> 8. 原子分组&nbsp;<br /> 9. 量词&nbsp;<br /> 10. 贪婪和吝啬&nbsp;<br /> 11. 匹配边界&nbsp;<br /> 12. 模式修正符&nbsp;<br /> 13. 字符串中用到正则的函数&nbsp;<br /> 14. 字符串中用到正则的函数&nbsp;<br /> 15. 字符串中用到正则的函数&nbsp;<br /> 16. 正则示例 </p></td> 
<td valign="center"><p>1. 百度搜索关键字描红效果&nbsp;<br /> 2. 万网实时非法信息过滤效果&nbsp;<br /> 3. 58同城注册验证效果 </p></td> 
</tr> 
<tr> 
<td width="99" valign="center"><p align="center">Jquery框架 </p></td> 
<td width="100" valign="center"><p>&nbsp;</p></td> 
<td width="300" valign="center"><p>1. Jquery是什么?&nbsp;<br /> 2. Jquery特点&nbsp;<br /> 3. Jquery的成就&nbsp;<br /> 4. jquery的优势<br /> 5. jquery选择器&nbsp;<br /> 6. jquery筛选&nbsp;<br /> 7. jquery动画&nbsp;<br /> 8. jquery对属性操作&nbsp;<br /> 9. jquery对样式操作&nbsp;<br /> 10. jquery对尺寸操作&nbsp;<br /> 11. jquery对文档操作&nbsp;<br /> 12. jquery事件&nbsp;<br /> 13. jquery事件对象 </p></td> 
<td valign="center"><p>1. 苏宁tab切换效果&nbsp;<br /> 2. 糯米网轮播图效果<br /> 3. 弹性运动、缓冲运动&nbsp;<br /> 4. 消息轮播效果&nbsp;<br /> 5. 跑马灯效果&nbsp;<br /> 6. 一号店左侧二级菜单效果&nbsp;<br /> 7. 麦网焦点图效果&nbsp;<br /> 8. 新浪网顶部下滑广告&nbsp;<br /> 9. 京东商城无缝轮播效果 </p></td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #2261A6;" data-sta="2">第四阶段：JavaScript深入探究</h3> 
<table width="100%" border="0"> 
<tbody>
<tr class="title"> 
<td width="99" valign="center"><p align="center">课程名称 </p></td> 
<td width="200" valign="center"><p align="center">教学科目 </p></td> 
<td width="320" valign="center"><p align="center">详细内容 </p></td> 
<td valign="center"><p align="center">项目实例 </p></td> 
</tr> 
<tr> 
<td width="99" valign="center" rowspan="8"><p align="center">&nbsp;</p></td> 
<td width="200" valign="center">JavaScript函数 </td> 
<td width="320" valign="center">1. 回调函数&nbsp;<br /> 2. 递归函数 </td> 
<td valign="center">&nbsp;</td> 
</tr> 
<tr> 
<td width="200" valign="center">JavaScript对象 </td> 
<td width="320" valign="center">1. 类（构造函数） <br /> 2. 用构造函数的形式创建对象&nbsp;<br /> 3. 自由创建对象&nbsp;<br /> 4. 工厂模式创建对象&nbsp;<br /> 5. 对象的存储机制&nbsp;<br /> 6. 对象垃圾回收机制&nbsp;<br /> 7. 对象的遍历&nbsp; </td> 
<td valign="center">&nbsp;</td> 
</tr> 
<tr> 
<td width="200" valign="center">JavaScript对象的的继承 </td> 
<td width="320" valign="center">
<ol> 
<li>prototype原型&nbsp;<br /> 2. 原型链&nbsp;<br /> 3. Object对象&nbsp;<br /> 4. &nbsp;instanceof&nbsp;<br /> 5. constructor<br /> 6. 原型直接继承 </li> 
</ol> 7. Call、apply继承 </td> 
<td valign="center">1. 编写删除数组重复元素的函数&nbsp;<br /> 2. 编写对数组进行排序的函数 </td> 
</tr> 
<tr> 
<td width="200" valign="center">JavaScript字符串对象 </td> 
<td width="320" valign="center">1. Length属性&nbsp;<br /> 2. 获取指定位置的字符&nbsp;<br /> 3. 获取指定位置字符的unicode编码&nbsp;<br /> 4. 查找字符串位置&nbsp;<br /> 5. 替换字符串内容&nbsp;<br /> 6. 字符串的截取&nbsp;<br /> 7. 字符串与数组的转换&nbsp;<br /> 8. 字符串大小写转换 </td> 
<td valign="center">1. 获取字符串中所有指定字符的位置&nbsp;<br /> 2. 对指定字符串进行按需截取操作 </td> 
</tr> 
<tr> 
<td width="200" valign="center">BOM </td> 
<td width="320" valign="center">1. BOM模型概念&nbsp;<br /> 2. 获得浏览器可视区域的尺寸&nbsp;<br /> 3. setInterval()定时器&nbsp;<br /> 4. setTimeout()定时器&nbsp;<br /> 5. 清除定时器&nbsp;<br /> 6. history对象&nbsp;<br /> 7. location对象 </td> 
<td valign="center">1. 制作定时跳转页面&nbsp;<br /> 2. 页面倒计时跳转效果 </td> 
</tr> 
<tr> 
<td width="200" valign="center">DOM操作 </td> 
<td width="320" valign="center">1. 对内容、属性、样式的操作&nbsp;<br /> 2. 节点&nbsp;<br /> 3. 节点的属性操作&nbsp;<br /> 4. 创建节点&nbsp;<br /> 5. 追加节点&nbsp;<br /> 6. 删除节点&nbsp;<br /> 7. 替换节点&nbsp;<br /> 8. 复制节点 </td> 
<td valign="center">1. 获取页面中的表单并改变样式&nbsp;<br /> 2. 改变页面中所有图片的样式&nbsp;<br /> 3. 改变页面中所有a连接的样式&nbsp;<br /> 4. 制作即时提交的留言板页面&nbsp;<br /> 5. 年会随机抽奖效果&nbsp;<br /> 6. 京东商城轮播图效果&nbsp; </td> 
</tr> 
<tr> 
<td width="200" valign="center">元素的尺寸与位置 </td> 
<td width="320" valign="center">1. 元素的位置属性&nbsp;<br /> 2. 元素的尺寸属性&nbsp;<br /> 3. 获得元素的位置&nbsp;<br /> 4. 获得元素的滚动条位置 </td> 
<td valign="center">1. 腾讯固定广告效果&nbsp;<br /> 2. 天猫商城商品导航固定菜单效果&nbsp;<br /> 3. 小米论坛导航条跟随固定效果&nbsp;<br /> 4. 漂浮广告效果&nbsp; </td> 
</tr> 
<tr> 
<td width="200" valign="center">JavaScript事件对象 </td> 
<td width="320" valign="center">1. 获取键盘事件键盘码&nbsp;<br /> 2. 判断alt、shift、ctrl键是否被按下&nbsp;<br /> 3. 检测事件类型&nbsp;<br /> 4. 冒泡型事件流&nbsp;<br /> 5. 捕获型事件流&nbsp;<br /> 6. 阻止事件流&nbsp;<br /> 7. 获得目标事件源的对象&nbsp;<br /> 8. 阻止浏览器默认行为&nbsp; </td> 
<td valign="center">1. 开发基于javascript的打字游戏&nbsp;<br /> 2、微博输入框即时统计字数效果&nbsp;<br /> 2. 淘宝网商品放大镜效果 </td> 
</tr> 
<tr> 
<td width="99" valign="center"><p align="center">AJAX </p></td> 
<td width="200" valign="center">AJAX操作 </td> 
<td width="320" valign="center">
<ol> 
<li>AJAX的运行原理 </li> 
<li>AJAX的优势 </li> 
<li>JSON数据的处理 </li> 
<li>异步加载与同步加载的辨析 </li> 
<li>AJAX参数详解 </li> 
<li>AJAX示例讲解 </li> 
</ol></td> 
<td valign="center">百度即时搜索效果 </td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #2261A6;" data-sta="2">第五阶段：CSS3网页样式</h3> 
<table width="100%"> 
<tbody>
<tr class="title"> 
<td width="58" valign="center"> <p>课程名称 </p> </td> 
<td width="98" valign="center"> <p>教学科目 </p> </td> 
<td width="220" valign="center"> <p>详细内容 </p> </td> 
<td width="275" valign="center"> <p>完成目标 </p> </td> 
<td width="46" valign="center"> <p>课时 </p> </td> 
</tr> 
<tr> 
<td width="58" rowspan="10" align="center" valign="middle"> <p>CSS3 </p> </td> 
<td width="98" align="center" valign="middle"> <p>选择器 </p> </td> 
<td width="220" valign="center"> <p>子元素选择器 </p> <p>属性选择器 </p> <p>伪类选择器 </p> <p>文本选择器 </p> <p>制作个性的radio </p> </td> 
<td width="275" valign="center"> <p>子元素选择器&nbsp;属性选择器&nbsp;伪类选择器&nbsp;文本选择器&nbsp;制作个性的radio </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>颜色与单位 </p> </td> 
<td width="220" valign="center"> <p>RGBA颜色设置 </p> <p>px单位 </p> <p>rem单位 </p> <p>vw与vh单位 </p> <p>rem单位单位 </p> </td> 
<td width="275" valign="center"> <p>通过实例掌握各种单位的区别与不同的使用场&nbsp;菝，灵活的设罝颜色，棠握手机与PC页面尺寸&nbsp;的自适应开发技能。 </p> </td> 
<td width="46" align="center" valign="middle">3</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>文本操作 </p> </td> 
<td width="220" valign="center"> <p>控制块内文本数里 </p> <p>文本溢出控制 </p> <p>自定义文本阴彭 </p> </td> 
<td width="275" valign="center"> <p>通过css3灵活控制文本样式 </p> </td> 
<td width="46" align="center" valign="middle">2</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>布局盒子 </p> </td> 
<td width="220" valign="center"> <p>盒子阴影 </p> <p>盒子尺寸 </p> <p>盒子空间与怪异模式 </p> <p>报纸分栏操作 </p> <p>背景图像大小控制 </p> </td> 
<td width="275" valign="center"> <p>通过CSS3提供的高级特性，完成页面盒子效果的控制，怪异模式解决栏目间距问题与制作&nbsp;报纸分栏效果等。 </p> </td> 
<td width="46" align="center" valign="middle">3</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>晌应设计 </p> </td> 
<td width="220" valign="center"> <p>viewport&nbsp;概念 </p> <p>media&nbsp;query媒体查询 </p> <p>@media </p> <p>max&nbsp;width与&nbsp;max&nbsp;height </p> <p>设备方向判断 </p> </td> 
<td width="275" valign="center"> <p>掌握移动、PC设计的页面响应开发，能够快速制作出跨平台的晌应式页面。 </p> </td> 
<td width="46" align="center" valign="middle">4</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>Flex弹性布局 </p> </td> 
<td width="220" valign="center"> <p>box-orient </p> <p>box-direction </p> <p>box-pack </p> <p>box-align </p> <p>box-ordinal-group </p> <p>box-flex </p> </td> 
<td width="275" valign="center"> <p>熟练使用弹性盒模型完成页面的布局。 </p> </td> 
<td width="46" align="center" valign="middle">4</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>CSS3动画 </p> </td> 
<td width="220" valign="center"> <p>transition-property </p> <p>transition-duration </p> <p>transition-delay </p> <p>transition-timing-function </p> <p>transform-origin </p> <p>rotate旋转效果 </p> <p>translate移动效果 </p> <p>scale缩放效果 </p> <p>kew扭曲效果 </p> </td> 
<td width="275" valign="center"> <p>掌握通过CSS3制作常见的移动pc页面动画效果。 </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>分帧动画 </p> </td> 
<td width="220" valign="center"> <p>keyframes分帧动画溉念 </p> <p>animation-name </p> <p>animation-duration </p> <p>animation-timing-function </p> <p>animation-delay </p> <p>animation-iteration-count </p> <p>animation-direction </p> <p>animation-play-state </p> <p>perspective立体透视 </p> <p>3D空间 </p> </td> 
<td width="275" valign="center"> <p>掌握分帧动画的实现原理，与透视与3d的概念。完成3d幻灯片与微场景的功能制作。 </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>数学函数 </p> </td> 
<td width="220" valign="center"> <p>sin、cos、tan </p> <p>弧度与角度划算 </p> <p>获取页面圆上的坐标 </p> </td> 
<td width="275" valign="center"> <p>掌握页面中坐标的获取方法。 </p> <p>1.弹性菜单 </p> <p>2.苹果系统DOCK栏 </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>手持设备事件 </p> </td> 
<td width="220" valign="center"> <p>触屏事件 </p> <p>事件处理监听 </p> <p>获取不同设备尺寸 </p> <p>屏幕位置获取 </p> </td> 
<td width="275" valign="center"> <p>掌握适应手持移动设备的事件处理机制，为后面制作手机APP与WAP页面打好基础。 </p> <p>&nbsp;</p> </td> 
<td width="46" align="center" valign="middle">4</td> 
</tr> 
<tr> 
<td width="58" rowspan="3" align="center" valign="middle"> <p>实战项目 </p> </td> 
<td width="98" align="center" valign="middle"> <p>3D图片展示 </p> </td> 
<td width="220" valign="center"> <p>项目分析 </p> <p>图片切块 </p> <p>使用OOP思想编写JavaScript类库 </p> <p>事件委派机制 </p> </td> 
<td width="275" valign="center"> <p>掌握使用CSS3动画制作炫酷的3D图片效果，&nbsp;通过本项目要达到熟练运用CSS3各种动画效果。 </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>手机触屏幻灯片开发 </p> </td> 
<td width="220" valign="center"> <p>项目分析 </p> <p>不同平台亊件的差异 </p> <p>使用OOP思想编写JS类库 </p> <p>封装动画处理方法 </p> <p>滑动位置处理技巧 </p> <p>运用CSS3动画,使用移动端平滑运动 </p> </td> 
<td width="275" valign="center"> <p>通过本项目的学习，箪握不同平台差异步，与&nbsp;设试技巧，熟练运用OOP思想进行前台工能的&nbsp;开发。 </p> </td> 
<td width="46" align="center" valign="middle">5</td> 
</tr> 
<tr> 
<td width="98" align="center" valign="middle"> <p>微场景开发 </p> </td> 
<td width="220" valign="center"> <p>项目分析 </p> <p>animate.css的使用方法与技巧 </p> <p>运动动库的使用 </p> <p>微信微场景的开发 </p> </td> 
<td width="275" valign="center"> <p>掌握使用第三方动画库的技巧，与移动设备屏&nbsp;幕不同大小自适应高效处理方法，掌握了这些&nbsp;技术后，就可以开发出我们见到的所有微场景效果 </p> <p>了。 </p> </td> 
<td width="46" align="center" valign="middle">10</td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #3175B9;" data-sta="2">第六阶段：HTML5开发</h3> 
<table width="100%"> 
<tbody>
<tr class="title"> 
<td width="58" valign="center">课程名称</td> 
<td width="98" valign="center">教学科目</td> 
<td width="196" valign="center">详细内容</td> 
<td width="302" valign="center">完成目标</td> 
<td width="44" valign="center">课时</td> 
</tr> 
<tr> 
<td width="58" valign="center" rowspan="15"> <p>HTML5 </p> </td> 
<td width="98" valign="center"> <p>认识HTML5 </p> </td> 
<td width="196" valign="center"> <p>什么是HTML5 </p> <p>HTML5的新特性 </p> <p>浏览器支持情况 </p> <p>HTML5的优势 </p> <p>HTML5主要包括内容 </p> <p>HTML5中废弃的标签 </p> <p>HTML旧标签在HTML5中的改变 </p> <p>新增的全局属性 </p> </td> 
<td width="302" valign="center"> <p>掌握学习HTML5的意义与HTML5在开发中起到的颠覆性作用。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>新增标签 </p> </td> 
<td width="196" valign="center"> <p>article </p> <p>section </p> <p>nav </p> <p>aside </p> <p>time </p> <p>header </p> <p>footer </p> <p>address </p> <p>code </p> <p>mark </p> <p>ins与&nbsp;del </p> <p>figure </p> <p>colgroup与col标签 </p> <p>optgroup标签 </p> <p>progress标签 </p> <p>meter标签 </p> <p>details标签 </p> </td> 
<td width="302" valign="center"> <p>掌握新增的标签含义与前端开发中带来的便利，熟练使用新增标签开发未来页面。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>兼容性处理 </p> </td> 
<td width="196" valign="center"> <p>解决低版本浏览器兼容性问题 </p> </td> 
<td width="302" valign="center"> <p>解决在IE低版本中如何识别新增html标签 </p> </td> 
<td width="44" valign="center"> <p>2 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>新增js处理 </p> </td> 
<td width="196" valign="center"> <p>JSON的本地解决化方案 </p> <p>JS外部文件异步加载处理 </p> </td> 
<td width="302" valign="center"> <p>掌握json数据转化处理技巧，与js文件在新浏览器中的加载机制。 </p> </td> 
<td width="44" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>新增表单类型 </p> </td> 
<td width="196" valign="center"> <p>email </p> <p>url </p> <p>number </p> <p>range </p> <p>no&nbsp;validate </p> <p>date </p> <p>week </p> <p>color </p> <p>search </p> <p>list&nbsp;与&nbsp;datalist </p> </td> 
<td width="302" valign="center"> <p>使用HTML5中新增的表单属性完成高效的数据处理。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>新增表单属性 </p> </td> 
<td width="196" valign="center"> <p>Autofocus </p> <p>for属性 </p> <p>Formaction </p> <p>form&nbsp;target </p> <p>form&nbsp;method </p> <p>多文件上传multiple </p> <p>表单提示placeholder </p> <p>pattern表单验证 </p> <p>required表单唯一验证 </p> </td> 
<td width="302" valign="center"> <p>掌握新增的表单元索属性，熟练运行新增闻性&nbsp;到前端开发工作中，加快前端开发速度。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>音频与视频 </p> </td> 
<td width="196" valign="center"> <p>audio音频标签 </p> <p>video视频标签 </p> <p>获取与设置媒体资源 </p> <p>获取与设备播放进度 </p> <p>播放与暂停控制 </p> <p>音频设置 </p> <p>静音设置 </p> </td> 
<td width="302" valign="center"> <p>掌握在页面中设置音乐或音频标签，并了解在低版本浏览器中的视频格式处理机制。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>Draggable&nbsp;拖放 </p> </td> 
<td width="196" valign="center"> <p>什么是拖放 </p> <p>浏览器支持 </p> <p>Draggle属性 </p> <p>插件事件 </p> <p>dataTransfer </p> <p>FileReader </p> </td> 
<td width="302" valign="center"> <p>完成图片拖放上传与网站后台的拖放删除等功能的制作方法。 </p> </td> 
<td width="44" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>canvas动画 </p> </td> 
<td width="196" valign="center"> <p>什么是canvas动画 </p> <p>canvas动画特性 </p> <p>canvas标签 </p> <p>canvas对象 </p> </td> 
<td width="302" valign="center"> <p>了解canvas工作原理与特点与创建canvas对象&nbsp;用于javascript调用。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>canvas绘图 </p> </td> 
<td width="196" valign="center"> <p>context.fillRect </p> <p>context.strokeRect </p> <p>context.clearRect </p> <p>beginPath&nbsp;closePath </p> <p>moveTo </p> <p>lineTo </p> <p>fill </p> <p>stroke </p> <p>save </p> <p>restore </p> </td> 
<td width="302" valign="center"> <p>完成基本的canvas动画元素制作，与页面元素变化方式。 </p> </td> 
<td width="44" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>canvas画布控制 </p> </td> 
<td width="196" valign="center"> <p>Context.scale </p> <p>Context.translate </p> <p>context.rotate </p> </td> 
<td width="302" valign="center"> <p>掌握canvas动画运动的方法。 </p> </td> 
<td width="44" valign="center"> <p>3 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>canvas文本控制 </p> </td> 
<td width="196" valign="center"> <p>Context.font </p> <p>context.textAlign </p> <p>context.fillText </p> <p>context.strokeText&nbsp;context.textBaseline&nbsp;context.measureText </p> </td> 
<td width="302" valign="center"> <p>熟练使用canvas操作文字元素，比如设置文字&nbsp;字体，颜色、填充等效果。 </p> </td> 
<td width="44" valign="center"> <p>3 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>canvas图像控制 </p> </td> 
<td width="196" valign="center"> <p>Context.drawlmage </p> <p>context.createPattern </p> <p>context.getlmageData </p> <p>context.putlmageData </p> </td> 
<td width="302" valign="center"> <p>向canvas中绘制图像、视频与获取播放的视频截图等效果制作。 </p> </td> 
<td width="44" valign="center"> <p>3 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>web&nbsp;storage储存 </p> </td> 
<td width="196" valign="center"> <p>web&nbsp;storage储存特点 </p> <p>浏览器支持现状分析 </p> <p>sessionStorage </p> <p>localStorage </p> </td> 
<td width="302" valign="center"> <p>掌握本地数据储存的方式，可以在本地实现数据的保存 </p> </td> 
<td width="44" valign="center"> <p>3 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>HTML5扩展应用 </p> </td> 
<td width="196" valign="center"> <p>互联网新时代下的SEO的重要性 </p> <p>网站代码优化要点 </p> <p>写优化性能极佳的网站页面 </p> <p>优化案例分析 </p> </td> 
<td width="302" valign="center"> <p>掌握网站SEO要点，开发优化性能最好的网站前端页面。 </p> </td> 
<td width="44" valign="center"> <p>3 </p> </td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #3F83C8;" data-sta="2">第七阶段：前端潮流最前沿<span>(SASS/LESS/AngularJS/Bootstrap/SEAJS/ReactJS/Chart.js/D3.js/Grunt/Gulpjs)</span></h3> 
<table width="100%"> 
<tbody>
<tr class="title"> 
<td width="100" valign="center"><p align="center">课程名称 </p></td> 
<td width="110" valign="center"><p align="center">教学科目 </p></td> 
<td width="265" valign="center"><p align="center">详细内容 </p></td> 
<td width="302" valign="center"><p align="center">完成目标 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center" rowspan="5"><p align="center">最新的前端实用技术 </p></td> 
<td width="110" valign="center"><p align="center">SASS </p></td> 
<td width="265" valign="center">
<ol> 
<li>SASS的使用 </li> 
<li>SASS嵌套方式 </li> 
<li>函数定义方式 </li> 
<li>SASS的调用方式 </li> 
<li>mixin的使用 </li> 
<li>扩展/继承 </li> 
<li>SASS数学运算 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">掌握利用SASS进行高效率快速开发技能，让你的前端开发效率更高，代码可读性更强。 </p></td> 
</tr> 
<tr> 
<td width="110" valign="center"><p align="center">LESS </p></td> 
<td width="265" valign="center">
<ol> 
<li>LESS的编译方式 </li> 
<li>LESS的变量 </li> 
<li>LESS混合方式 </li> 
<li>LESS的嵌套 </li> 
<li>LESS的函数和运算 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">掌握利用LESS进行快速布局的方式，写最短的代码，快速实现各类布局工作。 </p></td> 
</tr> 
<tr> 
<td width="110" valign="center"><p align="center">AngularJS </p></td> 
<td width="265" valign="center">
<ol> 
<li>AngularJS的优势和应用 </li> 
<li>Mvc思想 </li> 
<li>Mvc三大组成部分 </li> 
<li>AngularJS的应用 </li> 
<li>模型和控制器 </li> 
<li>$scope </li> 
<li>指令 </li> 
<li>app指令 </li> 
<li>bind指令 </li> 
<li>repeat指令 </li> 
<li>静态模板 </li> 
<li>双向绑定 </li> 
<li>过滤器 </li> 
<li>事件处理器 </li> 
<li>路由 </li> 
<li>利用AngularJS进行表单验证 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">掌握利用AngularJS进行数据快速处理的方法，提高前端数字处理效率，让数据处理更便捷。 </p></td> 
</tr> 
<tr> 
<td width="110" valign="center"><p align="center">Bootstrap框架 </p></td> 
<td width="265" valign="center">
<ol> 
<li>Bootstrap概述与优点 </li> 
<li>Bootstrap布局容器 </li> 
<li>Bootstrap栅格系统 </li> 
<li>Bootstrap表单处理 </li> 
<li>Bootstrap表格处理 </li> 
<li>Bootstrap按钮处理 </li> 
<li>Bootstrap图片处理 </li> 
<li>Bootstrap自适应开发 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">掌握利用Bootstrap框架进行快速响应式页面的开发，无需设计基础，快速布局出兼容各设备漂亮的响应式页面。 </p></td> 
</tr> 
<tr> 
<td width="110" valign="center"><p align="center">SEAJS </p></td> 
<td width="265" valign="center">
<ol> 
<li>seajs模块化开发简介 </li> 
<li>载入模块 </li> 
<li>模块导出成员的方式 </li> 
<li>异步加载包的方式 </li> 
<li>使用第三方依赖 </li> 
<li>seajs配置 </li> 
<li>使用seajs实现分页组件 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">能使用sea.js框架进行快速模块化前端开发。</p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p align="center">&nbsp;</p></td> 
<td width="110" valign="center"><p align="center">ReactJS </p></td> 
<td width="265" valign="center">
<ol> 
<li>ReactJS介绍 </li> 
<li>组件 </li> 
<li>组件的嵌套、状态、参数 </li> 
<li>组件的生命周期 </li> 
<li>事件 </li> 
<li>React双向数据流 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">熟练掌握利用reactjs框架开发MVC架构，高效易用的前端页面。</p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p align="center">&nbsp;</p></td> 
<td width="110" valign="center"><p align="center">Chart.js </p></td> 
<td width="265" valign="center">
<ol> 
<li>Chart.js简介 </li> 
<li>使用方法 </li> 
<li>曲线图 </li> 
<li>柱状图 </li> 
<li>雷达图、蛛网图 </li> 
<li>极地区图 </li> 
<li>饼图 </li> 
<li>环形图 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">熟练掌握利用chart.js框架高效绘制各类图表的方法。</p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p align="center">&nbsp;</p></td> 
<td width="110" valign="center"><p align="center">D3.js </p></td> 
<td width="265" valign="center">
<ol> 
<li>D3.js简介 </li> 
<li>选择元素和绑定数据 </li> 
<li>选择、插入、删除元素 </li> 
<li>制作图标 </li> 
<li>比例尺 </li> 
<li>坐标轴 </li> 
<li>柱状图 </li> 
<li>交互操作 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">熟练掌握利用d3.js框架绘制各类图表和复杂图形的方法。</p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p align="center">&nbsp;</p></td> 
<td width="110" valign="center"><p align="center">Grunt </p></td> 
<td width="265" valign="center">
<ol> 
<li>环境搭建 </li> 
<li>安装grunt </li> 
<li>创建任务 </li> 
<li>JavaScript语法错误检测 </li> 
<li>文件实时监控 </li> 
<li>压缩js代码 </li> 
<li>合并多个文件 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center">熟练掌握前端自动化操作，有效提高前端开发效率。</p></td> 
</tr> 
<tr> 
<td width="100" valign="center"><p align="center">&nbsp;</p></td> 
<td width="110" valign="center"><p align="center">gulpjs </p></td> 
<td width="265" valign="center">
<ol> 
<li>gulpjs安装 </li> 
<li>文件测试 </li> 
<li>文件压缩 </li> 
<li>文件格式化 </li> 
<li>文件即时监听 </li> 
</ol></td> 
<td width="302" valign="center"><p align="center"> </p></td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #4F91D4;" data-sta="2">第八阶段：移动端APP开发</h3> 
<table width="100%"> 
<tbody>
<tr class="title"> 
<td width="58" valign="center">课程名称</td> 
<td width="98" valign="center">教学科目</td> 
<td width="243" valign="center">详细内容</td> 
<td width="254" valign="center">完成目标</td> 
<td width="45" valign="center">课时</td> 
</tr> 
<tr> 
<td width="58" valign="center" rowspan="8"> <p>手机APP开发 </p> </td> 
<td width="98" valign="center"> <p>HTML5游戏开发 </p> </td> 
<td width="243" valign="center"> <p>贪吃蛇、坦克大战游戏开发 </p> <p>手机“黑白块”游戏开发 </p> </td> 
<td width="254" valign="center"> <p>&nbsp;</p> </td> 
<td width="45" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>Hybrid </p> </td> 
<td width="243" valign="center"> <p>什么是hybrid </p> <p>hybrid开发的特点 </p> <p>使用html5开发支持 </p> <p>android与iphone全平台app </p> <p>主流APP开发框架讲解 </p> <p>HTML5&nbsp;plus框架的使用方法 </p> <p>Apicloud框架的使用 </p> </td> 
<td width="254" valign="center"> <p>了解hybrid未来混合开发的优势与需要掌握的技术点。 </p> </td> 
<td width="45" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>开发工具的选择 </p> </td> 
<td width="243" valign="center"> <p>开发工具的使用 </p> <p>模拟器的使用 </p> <p>连接手机直接调试 </p> </td> 
<td width="254" valign="center"> <p>掌握开发工作的使用技巧，与各种调试方法的使用。 </p> </td> 
<td width="45" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>手机底层操作模块 </p> </td> 
<td width="243" valign="center"> <p>手机本地储存 </p> <p>手机消息推送 </p> <p>手机通讯录读取 </p> </td> 
<td width="254" valign="center"> <p>使用JS库完成手机底层功能的调用。 </p> </td> 
<td width="45" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>Api接口调用 </p> </td> 
<td width="243" valign="center"> <p>查看接口文档 </p> <p>使用API接口读取数据 </p> </td> 
<td width="254" valign="center"> <p>掌握移动APP与服务器数据调用的方式，通过&nbsp;API获取数据并展示到手机APP中。 </p> </td> 
<td width="45" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>生成应用 </p> </td> 
<td width="243" valign="center"> <p>证书的介绍 </p> <p>打包生成android与iphone手机app </p> </td> 
<td width="254" valign="center"> <p>了解google与apple证书的生成流程。&nbsp;将开发完毕的手机APP打包生成应用。 </p> </td> 
<td width="45" valign="center"> <p>4 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>开发手机APP </p> </td> 
<td width="243" valign="center"> <p>腾讯新闻、网易新闻、网易音乐播放器等任选&nbsp;一款APP进行开发 </p> </td> 
<td width="254" valign="center"> <p>将所学知识应用到实际开发中，从app确定到开发到手机调试整合开发过程完整的实现。 </p> </td> 
<td width="45" valign="center"> <p>5 </p> </td> 
</tr> 
<tr> 
<td width="98" valign="center"> <p>网易手机app幵发 </p> </td> 
<td width="243" valign="center"> <p>项目分析 </p> <p>阅读API文档 </p> <p>JSON数据的APP储存技巧 </p> <p>APP登录的Token实现 </p> <p>制作移动端登录功能 </p> <p>使用zepto前端库 </p> <p>使用angular.js分配数据 </p> <p>手机视窗与帧工作原理分析 </p> <p>子窗口间传递数据 </p> <p>打包生成android与ios全平台App应用 </p> </td> 
<td width="254" valign="center"> <p>掌握使用HTML5快速幵发移动APP的能力，掌握移动APP中CSS3布局技巧，熟练运行各种第三方库协助幵发App，掌握移动平台窗口与帧的区别，掌握多窗口数据传递的方式。 </p> </td> 
<td width="45" valign="center"> <p>10 </p> </td> 
</tr> 
</tbody>
</table> 
</div> 
<div class="class limit"> 
<h3 style="background: #4F91D4;" data-sta="2">第九阶段：Node.js开发</h3> 
<table width="100%"> 
<tbody>
<tr class="title"> 
<td width="100" valign="center"><p align="center"><a name="OLE_LINK3" id="OLE_LINK3">课程名称</a></p></td> 
<td width="98" valign="center"><p align="center">教学科目 </p></td> 
<td width="300" valign="center"><p align="center">详细内容 </p></td> 
<td valign="center"><p align="center">完成目标 </p></td> 
</tr> 
<tr> 
<td width="100" valign="center" rowspan="6"><p align="center">Node.js </p></td> 
<td width="98" valign="center"><p align="center">初识node.js </p></td> 
<td width="300" valign="center">
<ol> 
<li>Nodejs简介 </li> 
<li>Nodejs特点 </li> 
<li>Nodejs环境搭建 </li> 
<li>开发工具的安装使用 </li> 
<li>Nodejs和JavaScript的异同 </li> 
</ol></td> 
<td valign="center"><p align="center">初识node.js平台，了解node.js的特色和未来趋势 </p></td> 
</tr> 
<tr> 
<td width="98" valign="center"><p align="center">基础对象和模块 </p></td> 
<td width="300" valign="center">
<ol> 
<li>执行js文件的方法 </li> 
<li>模块机制 </li> 
<li>模块加载 </li> 
<li>控制台操作 </li> 
<li>Global对象 </li> 
<li>Process对象 </li> 
<li>Module和exports </li> 
<li>输入和输出（sdtin、stdout） </li> 
</ol></td> 
<td valign="center"><p align="center">掌握node.js的基本用法和运行原理，为以后的实战打下良好的基础 </p></td> 
</tr> 
<tr> 
<td width="98" valign="center"><p align="center">线程、事件操作 </p></td> 
<td width="300" valign="center">
<ol> 
<li>进程和线程 </li> 
<li>单线程、多线程 </li> 
<li>let和const </li> 
<li>事件驱动 </li> 
</ol></td> 
<td valign="center"><p align="center">掌握进程和线程的思想，了解单线程多线程的运行机制，对事件驱动有进一步探究。 </p></td> 
</tr> 
<tr> 
<td width="98" valign="center"><p align="center">模块化 </p></td> 
<td width="300" valign="center">
<ol> 
<li>模块化开发 </li> 
<li>Require方法 </li> 
<li>require缓存 </li> 
<li>内部核心模块介绍 </li> 
<li>Buffer模块详解 </li> 
<li>path模块 </li> 
<li>readline模块 </li> 
<li>http模块 </li> 
</ol></td> 
<td valign="center"><p align="center">对常见模块有详细的了解并掌握其应用方式。 </p></td> 
</tr> 
<tr> 
<td width="98" valign="center"><p align="center">文件操作 </p></td> 
<td width="300" valign="center">
<ol> 
<li>文件的基础操作 </li> 
<li>文件的读写操作 </li> 
<li>使用递归操作文件 </li> 
<li>批量操作文件夹 </li> 
<li>文件流概念 </li> 
<li>文件流操作 </li> 
</ol></td> 
<td valign="center"><p align="center">掌握使用node.js对文件目录的操作方法。 </p></td> 
</tr> 
<tr> 
<td width="98" valign="center"><p align="center">Socket </p></td> 
<td width="300" valign="center">
<ol> 
<li>Socket基础 </li> 
<li>消息发送 </li> 
<li>消息接收 </li> 
<li>聊天室服务端原理 </li> 
<li>http模块详解 </li> 
</ol></td> 
<td valign="center"><p align="center">掌握node.js数据收发的实现方法，能方便自如的对各类服务器数据请求做好处理。 </p></td> 
</tr> 
</tbody>
</table> 
</div>  


<style type="text/css">
	
*{
	padding: 0;
	margin: 0;
	font-family: "microsoft yahei","Hiragino Sans GB";
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}

body{
	padding: 50px 10px;
}

/*å¤´éƒ¨å¤§å›¾*/
#top{
	width: 100%;
	height: 449px;
	background: #EC1332;
	border-bottom: 20px solid #FFD200;
}
#top img{
	display: block;
	margin: 0 auto;
}
/*å¤´éƒ¨å¤§å›¾ç»“æŸ*/

/*é›¶åŸºç¡€*/
#zero{
	width: 100%;
	height: 450px;
	/*border-bottom: 2px solid blue;*/
	margin: 0 auto;
	position: relative;
}
#zero img.right{
	position: absolute;
	top: 45px;
	right: 0px;
}
#zero p.title{
	font-size: 50px;
	color: #eb1232;
	font-weight: 700;
	line-height: 60px;
	position: absolute;
	left: 30px;
	top: 70px;
}
#zero p.description{
	background: #eb1232;
	color: white;
	font-size: 60px;
	padding: 20px 50px;
	font-weight: 700;
	position: absolute;
	top: 165px;
	left: 130px;
	letter-spacing: 3px;
}
#zero ul{
	position: absolute;
	top: 300px;
	left: 240px;
	width: 560px;
	height: 150px;
}
#zero ul li{
	width: 280px;
	height: 60px;
	line-height: 60px;
	font-size: 26px;
	color: #1b1b1b;
	float: left;
	text-indent: 35px;
	position: relative;
}
#zero ul li img{
	position: absolute;
	left: 0px;
	top: 15px;
}
/*é›¶åŸºç¡€ç»“æŸ*/

/*å¤§æ–‡æ¡ˆ*/
#byyl{
	width: 100%;
	padding: 40px 0;
	background: #208FEB;
	text-align: center;
	font-size: 60px;
	color: white;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 90px;
}
/*å¤§æ–‡æ¡ˆç»“æŸ*/

/*ç‰¹è‰²æ–‡å­—ä»‹ç»*/
#tswz{
	width: 100%;
	margin: 0 auto;
	padding: 50px 0;
	padding-bottom: 420px;
	background: url(images/xiangshan.jpg) no-repeat center bottom;
}
#tswz h2{
	color: #1B1B1B;
	text-align: center;
	font-size: 50px;
	font-weight: 400;
	margin-bottom: 10px;
	letter-spacing: 3px;
}
#tswz h2 span{
	font-weight: 700;
	color: #EB1232;
}
#tswz p{
	text-align: center;
	font-size: 20px;
	line-height: 45px;
	color: #1b1b1b;
	text-shadow: 0px 0px 15px #FFFFFF;
}
/*ç‰¹è‰²æ–‡å­—ä»‹ç»ç»“æŸ*/


/*è¯¾ç¨‹ç‰¹è‰²*/
#kcts{
	width: 100%;
	height: 555px;
	background: #FACC43;
}
#kcts .center{
	width: 100%;
	height: 555px;
	margin: 0 auto;
	position: relative;
}
#kcts .center img{
	position: absolute;
	top: 50px;
	left: 0;
}
#kcts .center .right{
	width: 820px;
	height: 460px;
	float: right;
	padding-top: 50px;
}
#kcts .center .right li{
	float: left;
	width: 328px;
	height: 218px;
	background: #0397E3;
	margin-right: 10px;
	margin-bottom: 10px;
	position: relative;
}
#kcts .center .right li h3{
	font-size: 27px;
	font-weight: 700;
	color: white;
	line-height: 60px;
	position: absolute;
	top: 5px;
	left: 0px;
	padding-left: 30px;
}
#kcts .center .right li p{
	line-height: 28px;
	font-size: 16px;
	color: white;
	position: absolute;
	top: 70px;
	left: 0px;
	padding-left: 30px;
	width: 268px;
}
/*è¯¾ç¨‹ç‰¹è‰²ç»“æŸ*/

/*ç¬¬ä¸€é˜¶æ®µ*/
.class{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	/*transition: height 1s;*/
	margin-bottom: 10px;
}
.class h3{
	background: #053563;
	/*text-align: center;*/
	text-indent: 70px;
	font-size: 23px;
	font-weight: 700;
	color: white;
	line-height: 65px;
	position: relative;
}
.class h3 span{
	font-size: 18px;
}
.class h3 img{
	position: absolute;
	top: 5px;
	right: 10px;
}
.class table{
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
}
.class table td{
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.class table tr.title td{
	text-align: center;
	line-height: 40px;
	background: #EEEEEE;
	font-weight: 700;
	font-size: 16px;
}
.class table tr td{
	line-height: 25px;
	font-size: 14px;
}
.class table tr td p{
	text-indent: 20px;
}
/*ç¬¬ä¸€é˜¶æ®µç»“æŸ*/

/*è¯¾ç¨‹é˜¶æ®µ*/
h2.kcjd{
	text-align: center;
	font-size: 40px;
	color: #1B1B1B;
	font-weight: 400;
	line-height: 60px;
	margin-top: 20px;
}
h2.kcjd span{
	font-weight: 700;
	color: #EC1332;
}
p.kcjd_js{
	font-size: 30px;
	color: #1B1B1B;
	text-align: center;
	line-height: 50px;
	margin-bottom: 20px;
}
a.xmzs{
	text-align: center;
	display: block;
	color: #999;
	line-height: 30px;
	font-size: 16px;
	width: 320px;
	margin: 0 auto;
}
a.xmzs:hover{
	color: #0397E3;
	text-decoration: underline;
}
/*è¯¾ç¨‹é˜¶æ®µç»“æŸ*/

/*æ—‹è½¬æœ¨é©¬*/
.poster-main{position: relative;width: 900px;height: 400px;margin: 0 auto;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width: 900px;height: 400px}
.poster-main .poster-list .poster-item{position: absolute;left: 0px;top: 0px}
.poster-main .poster-btn{position: absolute;height: 100%;width:100px;top: 0px;z-index: 10;opacity: 0.3;}
.poster-main .poster-prev-btn{left: 0px;background: url("images/flash/btn_l.png") no-repeat center center;}
.poster-main .poster-next-btn{right: 0px;background: url("images/flash/btn_r.png") no-repeat center center;}
/*æ—‹è½¬æœ¨é©¬ç»“æŸ*/

/*åº•éƒ¨*/
#bottom{
	background: #1357AA;
	padding-top: 40px;
	padding-bottom: 20px;
	/*margin-top: 20px;*/
}
#bottom p.title{
	font-size: 50px;
	color: white;
	line-height: 80px;
	text-align: center;
	font-weight: 700;
}
#bottom a.contact{
	font-size: 50px;
	color: #1357AA;
	background: #fffc00;
	display: block;
	width: 250px;
	text-align: center;
	display: block;
	line-height: 80px;
	margin: 20px auto;
	border-radius: 15px;
}
#bottom .biecuoguo{
	display: block;
	margin: 0 auto;
}
#bottom p.copy{
	text-align: center;
	font-size: 15px;
	line-height: 35px;
	color: white;
}
#bottom p.copy a{
	color: white;
}
/*åº•éƒ¨ç»“æŸ*/

/*å°±ä¸š*/
#jiuye{
	background: #02B686;
	padding: 40px 0;
	padding-top: 0px;
	margin-top: 30px;
}
#jiuye h3{
	font-size: 40px;
	color: yellow;
	text-align: center;
	line-height: 100px;
}
#jiuye h3 span{
	color: #EC1332;
}
#jiuye table{
	display: block;
	margin: 0 auto;
	color: white;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
}
#jiuye table tr td{
	line-height: 30px;
	font-size: 15px;
	text-align: center;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
#jiuye table tr.one{
	font-weight: 700;
}
/*å°±ä¸šç»“æŸ*/

/*é”¦æ——å±•ç¤º*/
.jinqi{
	overflow: hidden;
	margin: 10px auto;
	width: 100%;
}
.jinqi>img{
	width: 280px;
	margin-right: 3px;
	margin-left: 3px;
	width: 290px;
	margin-bottom: 5px;
	border-radius: 5px;
}
.jinqi .last{
	width: 290px;
	height: 163px;
	float: right;
	background: #B31A1D;
	line-height: 163px;
	text-align: center;
	font-size: 50px;
	letter-spacing: 2px;
	font-weight: 700;
	color: white;
	border-radius: 5px;
	position: relative;
}
.jinqi .last img{
	position: absolute;
	top: 95px;
	left: 120px;
}
/*é”¦æ——å±•ç¤ºç»“æŸ*/

.xinzi{
	display: block;
	margin: 0 auto;
}


#douhao{
	height: 65px;
	/*border: 1px solid blue;*/
	margin: 0 auto;
	margin-top: 30px;
}
#douhao .dou1{
	background: url(images/dou1.gif) no-repeat;
	width: 33px;
	height: 65px;
	float: left;
}
#douhao .title{
	float: left;
	font-size: 40px;
	line-height: 65px;
	font-weight: 700;
	padding: 0 20px;
	letter-spacing: 3px;
}
#douhao .title span{
	color: #EB0000;
}
#douhao .dou2{
	background: url(images/dou2.gif) no-repeat;
	width: 33px;
	height: 65px;
	float: left;
}
/*æ¯•ä¸šå­¦å‘˜ä½œå“*/
#byxy{
	width: 1000px;
	overflow: hidden;
	margin: 0 auto;
}
#byxy img{
	float: left;
	width: 250px;
	height: 141px;
}
/*æ¯•ä¸šå­¦å‘˜ä½œå“ç»“æŸ*/

.algou{
	text-align: center;
	display: block;
	color: #888;
	line-height: 2.2em;
	font-size: 16px;
}


/*è–ªèµ„å±•ç¤º*/
h2.title{
	color: white;
	background: #EB0000;
	line-height: 2em;
	text-align: center;
	font-weight: 700;
	font-size: 40px;
	margin-top: 20px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.xinzibox{
	width: 1207px;
	height: 411px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	position: relative;
	color: #333;
	
}
.xinzibox li.one{
	border-top: 1px solid #999;
	font-weight: 700;
	background: #D50100;
	color: white;
}

.xinzibox li{
	overflow: hidden;
	/*width: 100%;*/
	
}
.xinzibox li p{
	float: left;
	line-height: 40px;
	font-size: 15px;
	text-align: center;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	/*color: white;*/
}
.xinzibox li p:nth-child(1){
	width: 200px;
}
.xinzibox p:nth-child(2){
	width: 300px;
}
.xinzibox p:nth-child(3){
	width: 150px;
}
.xinzibox p:nth-child(4){
	width: 150px;
}
.xinzibox p:nth-child(5){
	width: 150px;
}
.xinzibox p:nth-child(6){
	width: 250px;
	border-right: 1px solid #999;
}
.xinzibox tr.one{
	font-weight: 700;
}
/*è–ªèµ„å±•ç¤ºç»“æŸ*/



/*appå±•ç¤º*/
.app{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 5px;
}
.app img{
	width: 230px;
	float: left;
	margin: 0 5px;
}



/*appå±•ç¤ºç»“æŸ*/

</style>
</body>
</html>